<!--
 * @Author: your name
 * @Date: 2020-11-24 16:18:45
 * @LastEditTime: 2021-01-07 19:54:17
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solax-design\src\views\projectList\projectList.vue
-->
<template>
    <div class="projectList-main-box">
        <el-divider content-position="left">{{$t('project.pro-management')}}</el-divider>
        <div class="button-box">
            <el-button type="primary" icon='el-icon-plus' class="marginR10" @click="()=>{$router.push({path:'/addProjectList'})}">创建新项目</el-button>
            <el-popconfirm
                    title="确定批量删除该数据吗？"
                    @confirm='projectListDeleteBatch()'
            >
                <el-button type="primary" slot="reference" icon='el-icon-delete' class="marginR10" >删除</el-button>
            </el-popconfirm>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe   :column='column' :select='true' @selection-change="handleSelectionChange($event)" >
            <template #proName='{data}'>
                <a href="javascript:;" style="color: #4c98d9;" @click='pushEditUrl(data.proId)'>{{data.proName}}</a>
            </template>
            <template #cityNameNational='{data}'>
                {{data.cityNameNational ? data.cityNameNational : data.cityNameInternational}}
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
    </div>
</template>

<script>
import baseTable from '../../components/common/baseTable'
export default {
    components: {
        baseTable
    },
    props: {

    },
    data() {
        return {
            loading:false,
            proIds:[],
            dataRows:[],
            column:[{
                title: '项目名称',
                value: 'proName',
                slot: 'proName'
            },
            {
                title: '城市',
                value: 'cityNameNational',
                slot: 'cityNameNational'
            },{
                title: '修改时间',
                value: 'createTime',
            }],
            selectDataList:[],
            size:10,
            current:1,
            total:1
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.projectListGetPage();
    },
    methods: {

        /*获取列表数据*/
        async projectListGetPage(){
            this.loading = true
            let res = await this.API.projectListGetPage({
                current:this.current,
                size:this.size,
            })
            this.dataRows = res.rows
            this.total= parseInt(res.total)
            this.loading = false
        },


        /*跳转详情页面*/
        pushEditUrl(id){
            this.$router.push({path: '/editProjectList', query: {id:id}});
        },

        /*删除*/
        async projectListDeleteBatch(){
            let res = await this.API.projectListDeleteBatch({
                proIds:this.proIds
            })
            if(res.success){
                this.$message({
                    message: '删除成功',
                    type: 'success'
                });
                this.projectListGetPage()
            }else{
                this.$message({
                    message: '删除失败',
                    type: 'warning'
                });
            }
        },

        handleSelectionChange(val){
            this.proIds = val.map( item=>{
                return item.proId
            })
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
            this.projectListGetPage()
        },

        handleCurrentChange(val) {
            this.current = val
            this.projectListGetPage()
        },
    },
};
</script>

<style  lang="less" scoped>
.projectList-main-box{
    
}
</style>

